<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>平台说明设置</title>
<!-- <link rel="shortcut icon" href="/img/favicon.ico" />
<script type="text/javascript" src="/js/jq.js"></script>
<script type="text/javascript" src="/js/global.js"></script>
<link rel="stylesheet" href="/css/global.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>	
<script type="text/javascript" src="/js/font_593825_j2lr0srcc6u323xr.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js"></script>
 <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />  -->
 <link rel="stylesheet" href="/css/global.css" />
 <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/js/jq.js"></script>
<script type="text/javascript" src="/js/global.js"></script>
 <script type="text/javascript" src="/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap-switch.min.css" />
<link rel="stylesheet" href="/css/jquery.dataTables.min.css" />
<script type="text/javascript"  src="/js/jquery.dataTables.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">

<style>
	.hidden-td{
		display: none;
	}
	.layui-layer-page .layui-layer-content{
		padding: 20px;
	}
	
	#addHelpType{
		margin:20px;
	}
	
	.dataTables_wrapper table td, .dataTables_wrapper table th {
	white-space: nowrap;
}
.dataTables_wrapper, .dataTables_wrapper table {
	overflow-x:auto;
	max-width:100%;
}
.dataTables_wrapper table {
	border-collapse: collapse!important;
}
table.dataTable thead th {
	border-bottom-color: #ddd!important;
}

.p-c-flexwrapper {
    display: flex;
    align-items: center;
    margin-right: 16px;
    margin-bottom: 16px;
    width: 100%;
}

.p-c-flexwrapper > .form-control {
    width: auto;
    flex-grow: 1;
}

.p-c-flexwrapper > span {
    width: 80px;
}
	
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }	
    	.modal-dialog {
		max-width: 1000px;
	}	
		.popover-content {
			display: flex;
			align-items: center;
			box-sizing: content-box;
		}
		.span-c-iconWrapper {
			border-radius: 4px;
			display: inline-flex;
			border: 1px solid silver;
			padding: 6px 7px 8px 7px;
			margin-left: 6px;
		}
		.span-c-iconWrapper > svg {
			font-size: 18px;
			cursor: pointer;
		}
		.popover-body {
			display: flex;
			align-items: center;
		}
		.span-c-iconWrapper-active {
			background-color: rgb(51, 122, 183);
			color: white;			
		}
		.svg-c-okIcon {
			fill: white;
		}
		.hourSelect {
			width:auto;
		}
		.panel-body table tr td:first-child {
		width:30%;text-align: center;}
		.panel-body table tr td:last-child {
		width:70%;text-align: left;}		
		.btn-popovers, .td-speicalRoleGuiZe{
			cursor: pointer;
			color:#0088cc!important;
		}
		.td-speicalRoleGuiZe > a {
			border-bottom: dashed 1px #0088cc;
		}
		
		.caozuo{
			display: none;
		}
		
		select.form-control:not([size]):not([multiple]){
			height: auto;
		}
		
		#addExplain{
			margin: 20px 0;
			margin-left: 30px;
		}
		
		#addHelp{
			margin: 20px 0;
			margin-left: 30px;
		}
		
		#help-content{
			margin-top: 30px;
			margin-bottom: 20px;
		}
		
		#editor-content .tableinfo{
			display: none;
		}
		
		#addAndHelpType{
			width: 350px;
		    left: 30%;
		    top: 30%;
		}
		
		.doubt-edit-td,.content-edit-td{
			max-width: 300px; 
		    text-overflow: ellipsis;
		    overflow: hidden;
		    white-space: nowrap;	
		}
</style>
</head>
<body>
			<div id="editor-content">
				<div><span>日常说明设置</span><button id="addExplain" class="btn btn-primary" data-toggle="modal" data-target="#addNewIpBaiMingDan">新增</button></div>
				<table id="table-explain" class="class-tableDataTable table-normal-datatables table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th style="display:none;"></th>
							<th>标题</th>
							<th style="display:none;">内容</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<div id="editor-Explain"></div>	
			</div>
			
			<div id="help-content">
				<div><span>帮助说明设置</span><button id="addHelpType" class="btn btn-primary" data-toggle="modal" data-target="#addNewIpBaiMingDan1">类型新增</button><button id="addHelpContent" class="btn btn-primary" data-toggle="modal" data-target="#addNewIpBaiMingDan2">说明新增</button></div>
				<table id="table-help" class="class-tableDataTable table-normal-datatables table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th style="display:none;"></th>
							<th style="display:none;"></th>
							<th>类别</th>
							<th>问题</th>
							<th>答案</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>	
			</div>
			
			
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="width:700px;">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		            </div>
		            <form  action="" method="post">
			            <div class="modal-body">
			            	<input id="input-i-id1" name="id" hidden="hidden" class="input-auto" />
			            	<p class="p-c-flexwrapper"><span>说明标题：</span><input name="noticeName" id="input-i-noticeName" required class="input-auto form-control" /></p>
			            	<p class="p-c-flexwrapper">
				            	<span>说明内容</span>
			            	</p>
			            	<div id="editor"></div>
			            </div>
			            <input hidden="hidden" name="noticePicture" id="input-i-noticeContent1">
		            </form>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi1">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal-dialog -->
		</div>	
		
		
		<div class="modal fade" id="addAndHelpType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		    <div class="modal-dialog">
		        <div class="modal-content" style="width:350px;">
		            <div class="modal-body">
		            	<p class="p-c-flexwrapper"><span>新增类型：</span><input  required="" class="input-auto form-control questionTye"></p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-HelpType">确定</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
		
		
		<div class="modal fade" id="addAndHelpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-body">
		            	<input id="input-i-id" hidden="hidden" class="input-auto"> 
		            	<p class="p-c-flexwrapper">
		            		<span>说明类型：</span>	
			            	<select id="input-i-state" required="" class="input-auto form-control">
			            	</select>
		            	</p>
		            	<p class="p-c-flexwrapper"><span>说明问题：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control normalText question" rows="3" id="textarea-i-question"></textarea></p>
		            	<p class="p-c-flexwrapper"><span>说明答案：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control normalText answer" rows="3" id="textarea-i-content"></textarea></p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitHelp">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
		  
		  <div class="modal fade" id="addAndHelpModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-body">
		            	<input id="input-i-id" hidden="hidden" class="input-auto"> 
		            	<p class="p-c-flexwrapper">
		            		<span>说明类型：</span>	
			            	<select id="input-i-state1" required="" class="input-auto form-control">
			            	</select>
		            	</p>
		            	<p class="p-c-flexwrapper"><span>说明问题：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control normalText question" rows="3" id="textarea-i-question1"></textarea></p>
		            	<p class="p-c-flexwrapper"><span>说明答案：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control normalText answer" rows="3" id="textarea-i-content1"></textarea></p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitHelp">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>	
	<script type="text/javascript" src="/js/wangEditor.min.js"></script>
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script>
	initEditor("#editor");
	
	var dataTable = $("#table-explain").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      "bAutoWidth": false,
	      'aLengthMenu':[5, 20],
	       "searching": false,
	        "dom": "t<'tableinfo'i<'tableSearch'p>l>", 
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "/explain/findTypeExplain.do",
	        	  "data": function ( d ) {
		    		  d.type=3; 
		           } ,
		           "dataSrc": function(json){
		        	   var newJson = json.data
		        	   $("#editor-Explain").empty();
		        	   console.log(newJson)
		        	    for (var i = 0; i < newJson.length; i++) {
	         			 var item = newJson[i]
	         			 var html="<div class='modal fade' id='editModal"+i+"' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>"+
				         		    "<div class='modal-dialog' style='width:700px;'>"+
				    		        "<div class='modal-content'>"+
			    			            "<div class='modal-body'>"+
			    			            "<p class='p-c-flexwrapper'><span>说明标题：</span><input name='noticeName' id='input-i-noticeName"+i+"' required='' class='input-auto form-control'></p>"+
			    			            	"<input id='input-i-id"+i+"' name='id' hidden='hidden' class='input-auto' />"+
			    			            	"<p class='p-c-flexwrapper'>"+
								            	"<span>说明内容</span>"+
							            	"</p>"+
			    			            	"<div id='editor"+i+"'></div>"+
			    			            "</div>"+
				    			            "<input hidden='hidden' name='noticePicture' id='input-i-noticeContent"+i+"'>"+
				    		            "<div class='modal-footer'>"+
				    		                "<button type='button' class='btn btn-primary' id='button-i-submitZongDaiLi"+i+"'>提交</button>"+
				    		                "<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>"+
				    		            "</div>"+
				    		        "</div>"+
				    		    "</div>"+
				    		"</div>";
				    		 $("#editor-Explain").append(html)
				    		 initEditor("#editor"+i);
		        	    }
		        	   return newJson;
		           }
	         },
	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
	                     {"data": "menu", "className": "menu-edit-td"},
	                     {"data": "content", "className": "hidden-td content-edit-td"},
	                     {"data": null, "defaultContent": "<button style='margin-right:10px' class='btn btn-info btn-editBaiMingDanItem btn-sm'>修改</button><button class='btn btn-danger btn-c-delBankInfo btn-sm butt-shanchu'>删除</button>"},
	                 ]   
	   		 })
	//点击日常说明的新增
	$("#addExplain").on("click",function(){
		$("#addAndEditModal").modal("show")
	})
	
	$("#addAndEditModal").on("click","#button-i-submitZongDaiLi1",function(){ //新增
		if($("#input-i-noticeName").val()=="" || $("#editor .w-e-text").text()==""){
			LayerContent("标题或内容不能为空")
			return;
		}
		$.post('/explain/saveExplaine.do',{"menu":$("#input-i-noticeName").val(),"content":$("#editor .w-e-text").html(),"type":3},function(result){
			$("#addAndEditModal").modal("hide")
			console.log(result);
			LayerContent("恭喜您新增成功")
 			dataTable.ajax.url("/explain/findTypeExplain.do").load();
		});
	})
	var id;
	var title;
	var content;
	$("#table-explain").on("click",".btn-editBaiMingDanItem",function(e){  //修改
		var index=$(this).parent().parent().index()
		id=$(this).parent().siblings(".id-edit-td").text();
		title=$(this).parent().siblings(".menu-edit-td").text();
		content=$(this).parent().siblings(".content-edit-td").html();
		console.log(id,title,content)
		$("#input-i-noticeName"+index).val(title)
		$("#editModal"+index).find(".w-e-text").html(content)
		$("#editModal"+index).modal("show")
		$("#button-i-submitZongDaiLi"+index).on("click",function(){
			title=$("#input-i-noticeName"+index).val()
			contnent=$("#editModal"+index).find(".w-e-text").html()
			$("#editModal"+index).modal("hide")
			$(".modal-backdrop").remove();
			$.post('/explain/saveExplaine.do',{"id":id,"menu":title,"content":contnent},function(result){
				LayerContent("恭喜您修改成功")
				dataTable.ajax.url("/explain/findTypeExplain.do").load();
			});
		})
	})
	
	$("#table-explain").on("click",".btn-c-delBankInfo",function(e){  //删除
		id=$(this).parent().siblings(".id-edit-td").text();
		 $.post('/explain/deleteExplain.do',{"id":id},function(result){
			 LayerContent("恭喜您删除成功")
			dataTable.ajax.url("/explain/findTypeExplain.do").load(); 
		 }); 
	})
	
	
	var dataTable_help = $("#table-help").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      "bAutoWidth": false,
	      'aLengthMenu':[5, 20],
	       "searching": false,
	        "dom": "t<'tableinfo'i<'tableSearch'p>l>", 
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "/explain/findTypeExplain.do",
	        	  "data": function ( d ) {
		    		  d.type=2; 
		           } ,
		           "dataSrc": function(json){
		        	   var newJson = json.data
		        	    for (var i = 0; i < newJson.length; i++) {
		        	    	
		        	    }
		        	   return newJson;
		           }
	         },
	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
						 {"data": "menu_id", "className": "hidden-td menu_id-edit-td"},
						 {"data": "menu", "className": "menu-edit-td"},
						 {"data": "doubt", "className": "doubt-edit-td"},
	                     {"data": "content", "className": "content-edit-td"},
	                     {"data": null, "defaultContent": "<button style='margin-right:10px' class='btn btn-info btn-editBaiMingDanItem btn-sm'>修改</button><button class='btn btn-danger btn-c-delBankInfo btn-sm butt-shanchu'>删除</button>"},
	                 ]   
	   		 })
	/*  addHelpType */  		 
	 $("#addHelpType").on("click",function(){  //类型新增
		 $(".questionTye").val("")
		 $("#addAndHelpType").modal("show")
	 })  
	 
	 
	 $("#addAndHelpType").on("click","#button-i-HelpType",function(){
			 console.log($(".questionTye").val())
			 if($(".questionTye").val()==""){
				 LayerContent("新增类型不能为空")
					return;
				}
			 $.post('/explain/findTypeExplain.do',{"type":1},function(newJson){
				  console.log(newJson)
				 var newJson = newJson.data
	     	    for (var i = 0; i < newJson.length; i++) {
	  			 	var item = newJson[i]
	  			 	console.log(item.menu,$(".questionTye").val())
	  			 	if(item.menu==$(".questionTye").val().trim()){
	  			 		console.log("哈哈哈")
	  			 		LayerContent("类型不能重复添加")
	  			 		return;
	  			 	}
	     	    }
			    $.post('/explain/saveExplaine.do',{"menu":$(".questionTye").val(),"type":1},function(result){
				 	$("#addAndHelpType").modal("hide")
					LayerContent("恭喜您新增类型成功")
				});
			 })
			 
			 
		 })
	 
	 var menu_id;
	   		 //点击日常说明的新增
	 $("#addHelpContent").on("click",function(){   //说明新增
		 if($("#input-i-state").val()==""){
			 LayerContent("请先添加帮助类型后再执行此操作") 
	   	}
		 $("#textarea-i-question").val("");
	 	$("#textarea-i-content").val("");
		 $("#addAndHelpModal").modal("show")
		  $.post('/explain/findTypeExplain.do',{"type":1},function(newJson){
			  console.log(newJson)
			 var newJson = newJson.data
			 $("#input-i-state").empty();
     	    for (var i = 0; i < newJson.length; i++) {
  			 	var item = newJson[i]
  			 
  			  $("#input-i-state").append("<option value="+item.id+">"+item.menu+"</option>")
     	    }
		 })
	}) 
	
	 $("#addAndHelpModal").on("click","#button-i-submitHelp",function(){
			 if($("#textarea-i-question").val()=="" || $("#textarea-i-content").val()==""){
				 LayerContent("问题或者答案不能为空") 
				 return;
			 }
			 $.post('/explain/saveExplaine.do',{"menu":$("#input-i-state").find("option:selected").text(),"menu_id":$("#input-i-state").find("option:selected").val(),"doubt":$(".question").val(),"content":$("#textarea-i-question").val(),"type":2},function(result){
				 $("#addAndHelpModal").modal("hide")
				 dataTable_help.ajax.url("/explain/findTypeExplain.do").load();
				 LayerContent("恭喜您新增说明成功")
			}); 
		 })
	
		var helpId
		var helpQuestion
		var helpContent
		var doubt
		$("#table-help").on("click",".btn-editBaiMingDanItem",function(e){  //修改
			 $.post('/explain/findTypeExplain.do',{"type":1},function(newJson){
			 var newJson = newJson.data
			 $("#input-i-state1").empty();
     	    for (var i = 0; i < newJson.length; i++) {
  			 	var item = newJson[i]
  			  $("#input-i-state1").append("<option value="+i+">"+item.menu+"</option>")
     	    }
		 })
			helpId=$(this).parent().siblings(".id-edit-td").text();
			helpQuestion=$(this).parent().siblings(".doubt-edit-td").text();
			helpContent=$(this).parent().siblings(".content-edit-td").text();
			doubt=$(this).parent().siblings(".menu-edit-td").text();
			console.log(helpId,helpQuestion,helpContent)
			$("#input-i-state1").text(doubt)
			$("#textarea-i-question1").val(helpQuestion)
			$("#textarea-i-content1").val(helpContent)
			$("#addAndHelpModal1").modal("show")
	})
	
	$("#addAndHelpModal1").on("click","#button-i-submitHelp",function(){
		$.post('/explain/saveExplaine.do',{"id":helpId,"menu":$("#input-i-state").find("option:selected").text(),"doubt":$("#textarea-i-question1").val(),"content":$("#textarea-i-content1").val()},function(result){
			$("#addAndHelpModal1").modal("hide")
			LayerContent("恭喜您修改成功")
			dataTable_help.ajax.url("/explain/findTypeExplain.do").load();
		});
	}) 	
	
	$("#table-help").on("click",".btn-c-delBankInfo",function(e){  //删除
		helpId=$(this).parent().siblings(".id-edit-td").text();
		 $.post('/explain/deleteExplain.do',{"id":helpId},function(result){
			 LayerContent("恭喜您删除成功")
			 dataTable_help.ajax.url("/explain/findTypeExplain.do").load(); 
		 }); 
	}) 
		 
	function LayerContent(content){
		layer.open({
		    type: 1,
		    area:['200px',"200px"],
		    title:"提示",
		    anim:3,
		    shadeClose: true, //点击遮罩关闭
		    content: content,
		    time:1000,
		    btn:'我知道了',   // 双按钮的话["",""]	
		  });
	}
	   		 
	 		 
	   		 

	</script>
</body>
</html>